<div class="m-pop m-pop-login" :controller="mc_loginpop">
  <div :visible="@register === 1">
    <div class="m-top">
      <img class="chacha" src="./images/Shape.png" alt="" :click="@bindclose()">
      <img class="banner" src="./images/ground.png" alt="">
    </div>
    <div class="m-land" :visible="@qr_code === 1">
      <img class="erweima" src="./images/erweima.png" alt="" :click="@qr_code = 2">
      <div class="m-nav">
        <div class="nav">
          <div :class="['item',@login_opt === 2?'on':'']" :click="@login_opt = 2">
            验证码登录
          </div>
          <div :class="['item',@login_opt === 1?'on':'']" :click="@login_opt = 1">
            账号登录
          </div>
        </div>
        <div class="right" :click="@register = 2">
          立即注册
        </div>
      </div>
      <form :validate="@validate_login" class="m-username" :visible="@login_opt === 1">
        <div class="inputbox">
          <input type="text" autofocus placeholder="请输入手机号" ms-duplex="@username" :rules="{required: true}" data-message="请填写账号！">
        </div>
        <div class="inputbox">
          <input type="password" name="" value="" placeholder="请输入登录密码" ms-duplex="@password" maxlength="18" :rules="{required: true}" data-message="请填写密码！">
          <div class="forget" :click="@register = 3">
            忘记密码?
          </div>
        </div>
        <div class="m-effects">
          <div class="left">
            <label :class="['u-icon',@checked?'u-icon-checkbox-checked':'u-icon-checkbox']" for="login"></label>
            <span>下次自动登录</span>
            <input id="login" type="checkbox" name="" value="" :duplex-checked="@checked">
          </div>
        </div>
        <input type="submit" class="button" value="登录"/>
      </form>
      <form :validate="@validate_mobile" class="m-username" :visible="@login_opt === 2">
        <div class="inputbox">
          <input type="text" autofocus placeholder="请输入手机号" data-pattern-message="手机号填写错误" maxlength="11" ms-duplex="@mobile" ms-rules="{required: true,digits:true, pattern: /^1[3|4|5|7|8][0-9]{9}$/}" data-duplex-changed="@getValidate"/>
          <div :class="[@send?'no_disabled':'disabled']" :click="@bind_validate">
            {{@codetxt}}{{@time}}
          </div>
        </div>
        <div class="inputbox">
          <input type="text" ms-duplex="@vcode | change" ms-rules="{required: true}" data-required-message="请填写验证码！" type="tel"  placeholder="请输入验证码">
        </div>
        <div class="m-effects">
          <div class="left">
            <label :class="['u-icon',@checked?'u-icon-checkbox-checked':'u-icon-checkbox']" for="login"></label>
            <span>下次自动登录</span>
            <input id="login" type="checkbox" name="" value="" :duplex-checked="@checked">
          </div>
        </div>
        <input type="submit" class="button" value="登录"/>
      </form>
    </div>

    <div class="m-land" :visible="@qr_code === 2">
      <div class="m-navs">
        <div class="text">
        </div>
        <div class="right" :click="@register = 2">
        </div>
      </div>
      <img class="erweima" src="./images/Shap.png" alt="" :click="@qr_code = 1">
      <div class="qr_code">
        <img src="./images/Rectangle.png" alt="">
      </div>
      <div class="sao">
        <div class="img">
          <img src="./images/saoyisao.png" alt="">
        </div>
        <div class="txt">
          <p>打开<span class="color-green">烽报</span></p>
          <p>扫一扫登录</p>
        </div>
      </div>
    </div>
  </div>

  <form :validate="@validate_register" :visible="@register === 2">
    <div class="m-top">
      <img class="chacha" src="./images/Shape.png" alt="" :click="@bindclose()">
      <img class="banner" src="./images/ground.png" alt="">
    </div>
    <div class="m-land">
      <div class="m-nav">
        <div class="text">
          注册
        </div>
        <div class="right" :click="@register = 1">
          已有账号,立即登录
        </div>
      </div>
      <div :validate="@validate_register" class="m-username">
        <div class="inputbox">
          <input type="text" autofocus  placeholder="请输入手机号" data-pattern-message="手机号填写错误" maxlength="11" ms-duplex="@phone_number" ms-rules="{required: true,digits:true, pattern: /^1[3|4|5|7|8][0-9]{9}$/}" data-duplex-changed="@getValidate"/>
          <div :class="[@sends?'no_disabled':'disabled']" :click="@bind_validate">
            {{@codetxt2}}{{@time_two}}
          </div>
        </div>
        <div class="inputbox">
          <input type="text" ms-duplex="@validate_number | change" ms-rules="{required: true}" data-required-message="请填写验证码！" type="tel"  placeholder="请输入验证码">
        </div>
        <div class="inputbox bottom_0">
          <input placeholder="请设置密码" type="password" maxlength="18"
  				:duplex="@new_password | change" data-required-message="请设置密码"
  				data-pattern-message="密码必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线"
  				placeholder="密码" ms-rules="{required: true, pattern: /^[a-zA-Z0-9_]{6,15}$/}">
        </div>
        <div class="tishi">
          8-16位,由数字、字母、下划线组成
        </div>
      </div>
    </div>
    <div class="m-effect">
      <div class="left">
        <label :class="['u-icon',@checked?'u-icon-checkbox-checked':'u-icon-checkbox']" for="login"></label>
        <span >下次自动登录</span>
        <input id="login" type="checkbox" name="" value="" :duplex-checked="@checked">
      </div>
      <input type="submit" class="button" value="注册"/>
    </div>
  </form>
  <form :validate="@validate_forgotPw" :visible="@register === 3">
    <div class="m-top">
      <img class="chacha" src="./images/Shape.png" alt="" :click="@bindclose()">
      <img class="banner" src="./images/ground.png" alt="">
    </div>
    <div class="m-land">
      <div class="m-nav">
        <div class="text">
          忘记密码
        </div>
        <div class="right" :click="@register = 1">
          已有账号,立即登录
        </div>
      </div>
      <div :validate="@validate_register" class="m-username">
        <div class="inputbox">
          <input type="text" autofocus  placeholder="请输入手机号" data-pattern-message="手机号填写错误" maxlength="11" ms-duplex="@mobile_forget" ms-rules="{required: true,digits:true, pattern: /^1[3|4|5|7|8][0-9]{9}$/}" data-duplex-changed="@getValidate"/>
          <div :class="[@sends3?'no_disabled':'disabled']" :click="@bind_validate">
            {{@codetxt3}}{{@time_3}}
          </div>
        </div>
        <div class="inputbox">
          <input type="text" ms-duplex="@validate_number | change" ms-rules="{required: true}" data-required-message="请填写验证码！" type="tel"  placeholder="请输入验证码">
        </div>
        <div class="inputbox bottom_0">
          <input placeholder="请设置密码" type="password" maxlength="18"
  				:duplex="@new_password | change" data-required-message="请设置密码"
  				data-pattern-message="密码必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线"
  				placeholder="密码" ms-rules="{required: true, pattern: /^[a-zA-Z0-9_]{6,15}$/}">
        </div>
        <div class="tishi">
          8-16位,由数字、字母、下划线组成
        </div>
      </div>
    </div>
    <div class="m-effect">
      <div class="left">
        <label :class="['u-icon',@checked?'u-icon-checkbox-checked':'u-icon-checkbox']" for="login"></label>
        <span >下次自动登录</span>
        <input id="login" type="checkbox" name="" value="" :duplex-checked="@checked">
      </div>
      <input type="submit" class="button" value="修改密码"/>
    </div>
  </form>
</div>
